<template>
  <a-tabs v-model:activeKey="activeKey" tabPosition="left">
    <a-tab-pane
      v-for="tab in tabs"
      :key="tab.key"
      :tab="tab.tab"
      tabPosition="left"
    >
      <component
        :is="tab.component"
        v-bind="tab.props"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import DistributionInfo from '../Tabs/DistributionInfo.vue';
import BiologicalCharacteristics from '../Tabs/BiologicalCharacteristics.vue';
import EcologicalCharacteristics from '../Tabs/EcologicalCharacteristics.vue';
import IdentificationMethods from '../Tabs/IdentificationMethods.vue';
import InvasionCharacteristics from '../Tabs/InvasionCharacteristics.vue';
import SimilarSpecies from '../Tabs/SimilarSpecies.vue';
import OccurrenceLocation from '../Tabs/OccurrenceLocation.vue';
import GeneralImpact from '../Tabs/GeneralImpact.vue';
import ControlMethods from '../Tabs/ControlMethods.vue';

const props = defineProps({
  items: {
    type: Object,
    required: true,
  },
});

const TabDatas = ref({
  DistributionInfo: '',
  position: '',
  BiologicalCharacteristics: '',
  EcologicalCharacteristics: '',
  IdentificationMethods: '',
  InvasionCharacteristics: '',
  SimilarSpecies: '',
  OccurrenceLocation: '',
  GeneralImpact: '',
  ControlMethods: '',
});

const activeKey = ref('1');
const tabs = ref([]);

// 更新 tabs 数组
const updateTabs = () => {
  tabs.value = [
    {
      key: '1',
      tab: '分布信息',
      component: DistributionInfo,
      props: {
        data: TabDatas.value.DistributionInfo,
        position: TabDatas.value.position
      },
    },
    {
      key: '2',
      tab: '生物学特性描述',
      component: BiologicalCharacteristics,
      props: { data: TabDatas.value.BiologicalCharacteristics },
    },
    {
      key: '3',
      tab: '生态学特性描述',
      component: EcologicalCharacteristics,
      props: { data: TabDatas.value.EcologicalCharacteristics },
    },
    {
      key: '4',
      tab: '鉴定和检测方法',
      component: IdentificationMethods,
      props: { data: TabDatas.value.IdentificationMethods },
    },
    {
      key: '5',
      tab: '入侵特点',
      component: InvasionCharacteristics,
      props: { data: TabDatas.value.InvasionCharacteristics },
    },
    {
      key: '6',
      tab: '相似物种',
      component: SimilarSpecies,
      props: { data: TabDatas.value.SimilarSpecies },
    },
    {
      key: '7',
      tab: '出现地点',
      component: OccurrenceLocation,
      props: { data: TabDatas.value.OccurrenceLocation },
    },
    {
      key: '8',
      tab: '一般影响',
      component: GeneralImpact,
      props: { data: TabDatas.value.GeneralImpact },
    },
    {
      key: '9',
      tab: '防控方法',
      component: ControlMethods,
      props: { data: TabDatas.value.ControlMethods },
    },
  ];
};

// 初始化 tabs
updateTabs();

watch(
  () => props.items,
  (newValue) => {
    if (newValue && newValue.length > 0) {
      const item = newValue[0];
      TabDatas.value = {
        DistributionInfo: item.DistributionInfo || {},
        position: item.position || {},
        BiologicalCharacteristics: item.BiologicalCharacteristics,
        EcologicalCharacteristics: item.EcologicalCharacteristics,
        IdentificationMethods: item.IdentificationMethods || {},
        InvasionCharacteristics: item.InvasionCharacteristics || {},
        SimilarSpecies: item.SimilarSpecies || {},
        OccurrenceLocation: item.OccurrenceLocation || {},
        GeneralImpact: item.GeneralImpact || {},
        ControlMethods: item.ControlMethods || {},
      };
      // 每次更新 TabDatas 后重新更新 tabs
      updateTabs();
    }
  },
);

</script>
